<template>
	<view class="container">
		<uni-nav-bar
			statusBar="true"
			:fixed="true"
			backgroundColor="transparent"
			:border="false"
			title="企业服务中心"
			color="white"
			left-icon="left"
			@clickLeft="backTo"
		></uni-nav-bar>
		<image src="https://fine-yahe.oss-cn-shanghai.aliyuncs.com/app/enterpriseCenter/bg.png" mode="scaleToFill" class="bg"></image>
		<view class="header">
			<image src="https://fine-yahe.oss-cn-shanghai.aliyuncs.com/app/enterpriseCenter/text1.png" mode="aspectFit" class="header-img"></image>
		</view>
		<view class="main">
			<!-- <view class="card"></view> -->
			<view class="icon">
				<view class="icon-item" v-for="item in enterpriseList" :key="item.title" @click="jump(item.type)">
					<image :src="item.icon" mode="aspectFit" class="icon-img"></image>
					<view class="icon-text">{{ item.title }}</view>
				</view>
			</view>
			<view class="bar">
				<image src="@/static/enterpriseCenter/left.png" mode="aspectFit" class="bar-img"></image>
				<view class="bar-text">企业服务中心，帮门店经营更好</view>
				<image src="@/static/enterpriseCenter/right.png" mode="aspectFit" class="bar-img"></image>
			</view>
			<view class="barImage">
				<image src="https://fine-yahe.oss-cn-shanghai.aliyuncs.com/app/serviceCenter/bar2.png" mode=""></image>
			</view>
			<!-- <view class="list">
				<view class="list-item">
					<view class="list-item-title">聚合支付</view>
					<view class="list-item-text">聚合支付</view>
				</view>
				<view class="list-item">
					<view class="list-item-title">云打印机</view>
					<view class="list-item-text">聚合支付</view>
				</view>
				<view class="list-item">
					<view class="list-item-title">外呼系统</view>
					<view class="list-item-text">聚合支付</view>
				</view>
				<view class="list-item">
					<view class="list-item-title">分诊分屏</view>
					<view class="list-item-text">聚合支付</view>
				</view>
			</view> -->
		</view>
	</view>
</template>

<script>
import { enterpriseList } from './config';
export default {
	data() {
		return {
			// 页面数据可以动态绑定
			enterpriseList
		};
	},
	methods: {
		jump(type) {
			if (type) {
				uni.navigateTo({
					url: `/mineComponentPackage/serviceCentre/institution?type=${type}`
				});
			}
		},
		handleToUrl(url) {
			uni.navigateTo({
				url
			});
		},
		backTo() {
			if (getCurrentPages().length > 1) {
				uni.navigateBack({
					delta: 1 // 返回上一页
				});
			} else {
				uni.switchTab({
					url: '/pages/index/index'
				});
			}
		}
	}
};
</script>

<style scoped lang="less">
.container {
	background: #001718;
	display: flex;
	flex-direction: column;
	align-items: center;
	.bg {
		width: 100%;
		height: 100%;
		// background: var(--theme-color);
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
	}
	.header {
		color: #fff;
		// position: relative;
		z-index: 10;
		margin: 40rpx 0;
		width: 90%;
		text-align: center;
		.header-img {
			width: 510rpx;
			height: 152rpx;
		}
	}
	.main {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;

		.card {
			width: 90%;
			height: 152rpx;
			background: #00675e;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
		}
		.icon {
			display: flex;
			// justify-content: space-between;
			align-items: center;
			flex-wrap: wrap;
			width: 90%;
			text-align: center;
			background: RGBA(0, 55, 51, 0.8);
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			margin: 40rpx 0;
			.icon-item {
				width: 25%;
				margin: 20rpx 0;
				.icon-img {
					width: 112rpx;
					height: 112rpx;
				}
				.icon-text {
					font-weight: 400;
					font-size: 26rpx;
					color: #ffffff;
				}
			}
		}
		.bar {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 90%;
			margin-top: 20rpx;
			.bar-img {
				width: 88rpx;
				height: 8rpx;
			}
			.bar-text {
				font-weight: bold;
				font-size: 34rpx;
				color: #f0d1a5;
			}
		}
		.barImage {
			width: 90%;
			    /* text-align: center; */
			    display: flex;
			    margin: 40rpx 0 60rpx 0;
			image {
				width: 702rpx;
				height: 978rpx;
			}
		}
		.list {
			display: flex;
			justify-content: space-between;
			width: 90%;
			gap: 10rpx;
			margin: 40rpx 0;
			.list-item {
				width: 180rpx;
				height: 106rpx;
				background: rgba(255, 255, 255, 0.19);
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				gap: 5rpx;
				.list-item-title {
					font-weight: 500;
					font-size: 26rpx;
					color: #ffffff;
				}
				.list-item-text {
					font-weight: 400;
					font-size: 20rpx;
					color: rgba(255, 255, 255, 0.4);
				}
			}
		}
	}
}
</style>
